<template>
  
    <div class="first_level_page rating_page">
      <v-scroll :on-refresh="onRefresh" :on-infinite="onInfinite" :loading-text="loadingText" style="margin-top:-2.5rem;">
 
        <div class="integral_top_box clear">
            <div class="left imgaes"><img :src="this.userInfo.headImg" alt=""></div>
            <div class="left text">
                <h2>{{this.userInfo.trueName}}</h2>
                <p>久币<span>{{this.jiuBi}}</span></p>
            </div>
            <router-link to="/integralMall/howGetJiubi" class="right more">如何获得久币<img src="../../images/more.png" alt=""></router-link>
        </div>
        <div class="integral_middle_box clear">
            <div class="left"><router-link to="/conversionRecord"><img src="../../images/integral_icon1.png" alt=""><span>兑换记录</span></router-link></div>
            <div class="right"><router-link to="/integralRecord"><img src="../../images/integral_icon2.png" alt=""><span>积分记录</span></router-link></div>
        </div>
        <div class="integral_message clear">
            <div class="left"></div>
            <div class="left voucher_notice">
                <div class="marquee">
                    <div class="ellipsis">135***5376兑换了50元提货券</div>
                    <div class="ellipsis">132***9825兑换了10元提货券</div>
                    <div class="ellipsis">185***9063兑换了10元提货券</div>
                    <div class="ellipsis">135***2578兑换了20元提货券</div>
                    <div class="ellipsis">156***9036兑换了10元提货券</div>
                    <div class="ellipsis">137***5127兑换了50元提货券</div>
                    <div class="ellipsis">132***9652兑换了10元提货券</div>
                </div>
            </div>
            <!-- <div class="left ellipsis">      
              <marquee direction=up  scrolldelay="10" scrollamount="1" loop="-1" behavior="scroll"  width="100%" height="15px">                                      
                <p>135***5376兑换了50元提货券</p>  
                <p>132***9825兑换了10元提货券</p>  
                <p>185***9063兑换了10元提货券</p>  
                <p>135***2578兑换了20元提货券</p>  
                <p>156***9036兑换了10元提货券</p>  
                <p>137***5127兑换了50元提货券</p>  
                <p>132***9652兑换了10元提货券</p>  
               </marquee>
             </div> -->
        </div>
        <div class="integral_banner">
            <img src="../../images/integral_banner.png" alt="">
        </div>
        <div class="contain">
            <div class="title"><h2><i>●</i>&nbsp;兑换专区&nbsp;<i>●</i></h2><hr></div>
            <div class="integral_nav">
                <ul class="clear">
                   <!--  <li ><span>全部</span></li> -->
                    <li :class="{cur:styles==1}"><span v-on:click="toVoucher()">提货券</span></li>
                    <li :class="{cur:styles==3}"><span>实物礼品</span></li>
                    <li :class="{cur:styles==2}"><span v-on:click="toTicket()">旅游门票</span></li>
                    <li :class="{cur:styles==4}"><span>服务卡</span></li>
                </ul>
            </div>
            
              <div class="integral_body">
               
                  <ul class="clear">
                      <li @click="toCouponsDetail(voucher)"  v-for="voucher in voucherList">
                        <div v-if="voucher.exchangeMark==0" class="top"><div class="img_box"><img src="../../images/jiu_bg01.png" alt="" /></div><h2><em>{{voucher.deductAmount}}</em>元</h2></div>
                        <div v-else class="top"><div class="img_box"><img src="../../images/jiu_bg02.png" alt="" /></div><h2><em>{{voucher.deductAmount}}</em>元</h2></div>
                        <div class="text ellipsis">{{Vname(voucher.voucherName)}}</div>
                        <div class="bottom clear">
                             <div class="left"><span class="line"><em :style="{left: cssLeft(voucher.totalNum,voucher.leaveNum,voucher.sellNum)}"></em></span></div>
                             <!-- 程序注意，橘色条左右移动，修改left:-50%;里面的数字即可，减号保留 -->
                             <div class="right">已兑换{{ratio(voucher.totalNum,voucher.leaveNum,voucher.sellNum)}}%</div>
                        </div>
                        <div class="sm">
                            <div><img src="../../images/jiu.png" alt="">{{voucher.jiubiNum}}</div>
                        </div>
                      </li>
                      
                  </ul>
                
              </div> 
                  
        </div>
       </v-scroll>   
       
        <transition name="router-slid" mode="out-in">
            <router-view></router-view>
        </transition> 

        <transition name="loading">
            <loading v-if="showLoading"></loading>
        </transition>  
    </div>
     
</template>

<script>
    import Scroll from 'src/components/common/pulldown';
    import {mapState,mapMutations} from 'vuex'
    import {shop_getVoucherList,getTicketList,getNextReputationIndex} from 'src/service/getData'
    import loading from 'src/components/common/loading'

    export default {
        data(){
            return{
                jiuBi:0,
                styles:1,
                token:'',
                loadingText:'加载中……',
                num : 10,  // 一次显示多少条
                endRow : 1, // 结束页数
                base:10,
                voucherList:[],
                temporaryVoucherList:[],
                startRow : 1, // 开始页数
            
                showLoading: true, //显示加载动画
            }
        },
        mounted(){
            this.endRow = this.base;
            this.token  = this.userInfo.token;
            this.getJiuBi();
            this.getVoucherList();
        },
        components: {
            'v-scroll':Scroll,
            loading,
        },
        computed:{
             ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            init(){
                //this.styles=1;
                this.startRow = 1; // 开始页数
                this.endRow = this.base; // 结束页数
                this.voucherList=[];
                this.temporaryVoucherList=[];
                this.$el.querySelector('.load-more').style.display = 'block';
                //this.VandT=1;
                //this.getJiuBi();

                
            },
            async getJiuBi(){
                if (this.userInfo && this.userInfo.uid) {
                    let data = await getNextReputationIndex(this.token);
                    this.jiuBi = data.data.jiuBi;  
                }
                this.showLoading = false;
            },
            async getVoucherList(){
                         
                if (this.userInfo && this.userInfo.uid) {
                    let data = await shop_getVoucherList(this.token,this.startRow,this.endRow);
                    this.temporaryVoucherList = data.data;
                    this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                   if ( this.temporaryVoucherList.length<this.base) 
                   {
                      this.$el.querySelector('.load-more').style.display = 'none';
                   }
                   this.temporaryVoucherList=[];
                }
            },           
            //售出比率
            ratio(totalNum,leaveNum,sellNum){    
               
                let num = (totalNum-leaveNum)/totalNum*100;
                return num.toFixed(1);
            },
            cssLeft(totalNum, leaveNum,sellNum){
                let num = (totalNum-leaveNum)/totalNum*100;
                return Math.round((num-100)*100)/100 +'%';
            },
            Vname(voucherName) {
              if(voucherName.length>10)
              {
                return voucherName.substring(0,10)+"..";
              }
              else
              {
                 return voucherName;
              }
            },            
            //转到门票
            async toTicket(){
             
              /*if(!event._constructed){//如果不存在这个属性,则不执行下面的函数
                  return;
              }*/
              if(this.styles==2){
                 return;
              }
              this.$el.querySelector('.load-more').style.display = 'block';
              this.voucherList=[];
              this.temporaryVoucherList=[];
              this.styles=2;
              this.startRow = 1;
              this.endRow = this.base;
             
              if (this.userInfo && this.userInfo.uid) {
                   
                    let data = await getTicketList(this.token,this.startRow,this.endRow);
                    this.temporaryVoucherList = data.data;
                    this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                  
                   if ( this.temporaryVoucherList.length<this.base) 
                   {
                      this.$el.querySelector('.load-more').style.display = 'none';
                   }
                   this.temporaryVoucherList=[];
                }
            },
            //转到提货券
            async toVoucher(){             
              if(this.styles==1){
                 return;
              }
              this.$el.querySelector('.load-more').style.display = 'block';
             
              this.voucherList=[];
              this.temporaryVoucherList=[]; 
              this.styles=1;
              this.startRow = 1;
              this.endRow = this.base;
            
              if (this.userInfo && this.userInfo.uid) {
                  let data = await shop_getVoucherList(this.token,this.startRow,this.endRow);
                  this.voucherList = data.data;
                }

            },
            async  onRefresh(done) {
                  this.init();
                 
                  if(this.styles==1)
                  {
                    
                    let data = await shop_getVoucherList(this.token,this.startRow,this.endRow);
                    this.temporaryVoucherList = data.data;
                    this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                   if ( this.temporaryVoucherList.length<this.base) 
                   {
                      this.$el.querySelector('.load-more').style.display = 'none';
                   }
                   this.temporaryVoucherList=[];
                   
                    
                  }
                  else
                  {
                    
                    let data = await getTicketList(this.token,this.startRow,this.endRow);
                    this.temporaryVoucherList = data.data;
                    this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                   if ( this.temporaryVoucherList.length<this.base) 
                   {
                      this.$el.querySelector('.load-more').style.display = 'none';
                   }
                   this.temporaryVoucherList=[];
                    
                  }
                  done() // call done
            },
            //上拉加载，
           async onInfinite(done){
               
                this.loadingText='加载中……';
                this.startRow = this.voucherList.length+1;
                this.endRow = this.startRow+this.base-1;
                
                if(this.styles==1)
                {
                  if (this.userInfo && this.userInfo.uid) {
                        let data = await shop_getVoucherList(this.token,this.startRow,this.endRow);
                        this.temporaryVoucherList = data.data;
                      
                        if(this.temporaryVoucherList.length!=0&&this.voucherList.length!=0)
                        {
                          if(this.temporaryVoucherList[0].voucherCode==this.voucherList[0].voucherCode)
                          {
                           
                             done()
                            return;
                          }
                        }
                        this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                    if (this.temporaryVoucherList.length<this.base) 
                    {
                        this.$el.querySelector('.load-more').style.display = 'none';

                    }
                    this.temporaryVoucherList=[];
                  }
                }
                if(this.styles==2)
                {
                  if (this.userInfo && this.userInfo.uid) {
                    let data = await getTicketList(this.token,this.startRow,this.endRow);
                    this.temporaryVoucherList = data.data;
                   
                    if(this.temporaryVoucherList.length!=0&&this.voucherList.length!=0)
                    {
                      if(this.temporaryVoucherList[0].voucherCode==this.voucherList[0].voucherCode)
                      {
                          done()
                        return;
                      }
                    }
                    this.voucherList = this.voucherList.concat(this.temporaryVoucherList);
                    if ( this.temporaryVoucherList.length<this.base) 
                    {
                      this.$el.querySelector('.load-more').style.display = 'none';
                    }
                    this.temporaryVoucherList=[];
                  }
                }

                done() // call done
            },
            toCouponsDetail(voucher){
              this.$router.push({path:'/couponsDetail', query:{voucherCode:voucher.voucherCode,exchangeMark:voucher.exchangeMark}});
            }
        }
    }
</script>

<style lang="scss" scoped>
.wrapper{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    overflow-y: auto;
}
span , em , i{font-style:normal;}
.integral_top_box{padding:.35rem .3rem .35rem .4rem;background:#fff;}
.integral_top_box .imgaes{width:.98rem;height:.98rem;}
.integral_top_box .imgaes img{width:100%; height:100%;border-radius:10rem;border:.02rem solid #f4f4f4;overflow:hidden;}
.integral_top_box .text{margin-top:.05rem;margin-left:.2rem;}
.integral_top_box .text h2{font-size:.3rem;color:#333;}
.integral_top_box .text p{font-size:.3rem;color:#333;color:#999;font-size:.24rem;margin-top:.18rem;}
.integral_top_box .text p span{font-size:.28rem;color:#ffa101;}
.integral_top_box .more{font-size:.28rem;color:#999;line-height:.98rem;}
.integral_top_box .more img{width:.13rem;margin-left:.14rem;vertical-align:-.03rem;}
.integral_middle_box{background:#fff;border-top:.02rem solid #f4f4f4;padding:.3rem 0;}
.integral_middle_box>div{width:50%;text-align: center;font-size:.28rem;color:#666;}
.integral_middle_box>div>a{display: block;}
.integral_middle_box>div img{width:.6rem;margin-right:.18rem;}
.integral_middle_box>div span{vertical-align:.15rem;}
.integral_middle_box .right{width:50%;border-left:.02rem solid #f4f4f4;}
.integral_message{background:#fff;padding:.2rem 0;margin-top:.22rem;}
.integral_message .left:first-child{margin:0 .3rem;width:1.2rem;height:.3rem;background:url(../../images/integral_title1.png);background-size:100% 100%;}
.integral_message .left:last-child{padding-left:.3rem;font-size:.28rem;color:#333;border-left:.02rem solid #d3d3d3;}
.integral_banner img{width:100%;}
.title{width:5rem;margin:0 auto;position:relative;height:.32rem;text-align: center;}
.title h2{position:absolute;width:2.2rem;top:0;color:#333; left:50%;margin-left:-1.1rem; height:100%;line-height:.32rem;font-size:.32rem;z-index:2;background:#fff;}
.title h2 i{color:#ddd;}
.title hr{-webkit-margin-before:0;-webkit-margin-after:0;position:absolute;top:50%;z-index:0;border-top:.01rem solid #d3d3d3;width:100%;left:0;}
.contain{background:#fff;padding-top:.32rem;}
.integral_nav{margin-top:.2rem;}
.integral_nav ul li{float:left;width:20%;line-height:.8rem;}
.integral_nav ul li span{width:80%;margin:0 auto; display:block;font-size:.26rem;color:#666;text-align: center;}
.integral_nav ul li.cur span{border-bottom:.04rem solid #ffa101;color:#ffa101;}
.integral_body ul{border-top:.01rem solid #eee;}
.integral_body ul li{border-bottom:.01rem solid #eee;padding-top:.48rem;padding-bottom:.3rem; width:50%; border-left:.01rem solid #eee;float:left; height: 3.9rem;}
.integral_body ul li:nth-of-type(odd){border-left:0;}
.integral_body ul li .top{position:relative; font-size: 0;}
.integral_body ul li .top .img_box{width:100%;text-align: center;}
.integral_body ul li .top img{width:2.56rem;}
.integral_body ul li .top h2{position:absolute;width:100%;text-align:center;text-shadow: 0 3px 0 rgba(0,0,0,0.3); font-weight:600;top:50%;margin-top:-.26rem;color:#fff;font-size:.22rem;}
.integral_body ul li .top h2 em{font-size:.32rem;line-height:normal;}
.integral_body ul li .text{font-size:.26rem;color:#333;width:80%;text-align: center;margin:0 auto; margin-top: .2rem;}
.integral_body ul li .bottom{width:80%;margin:0 auto;margin-top:.22rem;}
.integral_body ul li .bottom .left{width:1.4rem;}
.integral_body ul li .bottom .right{
    text-align:right;font-size:.2rem;
    color:#999;
    width:calc(100% - 1.5rem);
    -webkit-width:calc(100% - 1.5rem);
    -moz-width:calc(100% - 1.5rem);
    -o-width:calc(100% - 1.5rem);
}

@media screen and (max-width:360px) {
.integral_body ul li .bottom .left{width:1.3rem;}
.integral_body ul li .bottom .right{width:calc(100% - 1.4rem);-webkit-width:calc(100% - 1.4rem);-moz-width:calc(100% - 1.4rem);-o-width:calc(100% - 1.4rem);}
}
.integral_body ul li .bottom .line{display:block;overflow:hidden; margin-top:.13rem; position:relative;background:#f4f4f4;border-radius:10rem;width:100%;height:.08rem;}
.integral_body ul li .bottom .line em{display:block;position:absolute; top:0; background:#ffa101;border-radius:10rem;width:100%;height:.08rem;}
.integral_body ul li .sm{color:#ffa101;font-size:.24rem;font-weight:600;margin-top:.2rem;text-align: center;}
.integral_body ul li .sm img{width:.26rem;height:.26rem;margin-right:.12rem;}
    
    /* marquee{
      height: .3rem;
    }
     */
    .voucher_notice{
        height: .3rem;
        overflow: hidden;
        line-height: .3rem;
        .marquee{
            display: block;
            width: 300%;
            height: .3rem;
            animation: marquee 18s linear infinite;
            div.ellipsis {
                font-size: .28rem;
                color: #333;
                line-height: .5rem;
                height: .5rem;
            }
        }
        @keyframes marquee {
            0% { margin-top: 0; }
            100% { margin-top: -3.5rem; }
        }
    }

</style>
